<template>
	<view class="content">
		<view class="content-block">
			<view class="title">{{detail.configIdText}}</view>
			<view class="article-content">
				<mp-html :content="detail.introduce" />
			</view>
		</view>
		<view class="title" style="font-size: 36rpx; font-weight: bold;">培训课程</view>
		<template v-if="list.length>0">
			<view class="block course-block" v-for="item in list" :key="item.id"
				@click="navigate('/page_other/train/course_detail?id='+item.id)">
				<image :src="item.logo?item.logo:imageUrl+'/job_hunting/job_detail/enterprise.jpg'" class="img">
				</image>
				<view class="course-info">
					<view class="title">{{item.courseName}}</view>
					<view class="course-time">开班时间：{{item.startTime}}至{{item.endTime}}</view>
					<view class="course-wage">{{item.price}}<text class="text1">元</text></view>
				</view>
			</view>
		</template>
		<view class="block course-block" v-else>暂无数据</view>
	</view>
</template>

<script>
	import {
		getTrainSpecialityByIdApi,
		getCourseByTrainApi
	} from '@/api/train.js';
	export default {
		data() {
			return {
				userIdentity: 0,
				detail: {
					configIdText: '',
					introduce: ''
				},
				id: null,
				trainId: null,
				configId: null,
				list: []
			}
		},
		methods: {
			navigate(url) {
				uni.navigateTo({
					url
				})
			},
			getNew(id) {
				getTrainSpecialityByIdApi({
					id: this.id
				}).then((res) => {
					console.log(res)
					this.detail = res
				}).catch((res) => {})
			},
			getList(id) {
				getCourseByTrainApi({
					configId: this.configId,
					trainId: this.trainId
				}).then((res) => {
					this.list = res
					console.log(this.list)
				}).catch((res) => {})
			},
		},
		onLoad(e) {
			this.id = e.id;
			this.trainId = e.trainId
			this.configId = e.configId
			this.getNew();
			this.getList()
		},
		onShow() {
			this.userIdentity = this.$store.state.userIdentity;
		}
	}
</script>

<style lang="scss">
	page {
		background: #EFEFEF;
	}

	$box-shadow: 0 0 10px 0 #efefef;

	img {
		max-width: 100%;
	}

	.block {
		width: 100%;
		border-radius: 20rpx;
		background: #fff;
		box-shadow: $box-shadow;
		padding: 20rpx;
		margin-bottom: 30rpx;

		.text {
			font-size: 36rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
	}

	.content {
		width: 100%;
		padding-bottom: 20rpx;
		background: #EFEFEF;
		padding: 30rpx;

		.content-block {
			background-color: #fff;
			padding: 30rpx;
			box-shadow: $box-shadow;
			margin-bottom: 30rpx;

			.title {
				text-align: center;
				font-size: 40rpx;
				font-weight: bold;
				margin-bottom: 30rpx;
			}

			.sub-title {
				font-size: 28rpx;
				color: #999;
				margin-bottom: 30rpx;
			}
		}

		.course-block {
			display: flex;
			margin-top: 30rpx;

			.img {
				width: 160rpx;
				height: 160rpx;
				border-radius: 16rpx;
				margin-right: 20rpx;
			}

			.course-info {
				width: calc(100% - 180rpx);
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: space-between;

				.course-time {
					color: #767676;
					font-size: 26rpx;
					text-align: start;
				}

				.course-wage {
					color: #0256FF;
					font-size: 30rpx;

					.text1 {
						color: #0256FF;
						font-size: 26rpx;
					}
				}
			}
		}
	}
</style>